<template>
<div style="overflow: auto; height: 540px">
    <Card class="Card" :title="lang.step_prepare_create_database">
        <ul>
            <li><span class="col">{{ lang.database_engine }}</span> <span class="col1">{{ superDataBaseConfig.connection.database }}</span></li>
            <li><span class="col">{{ lang.database_name }}</span> <span class="col1">{{ superDataBaseConfig.databaseName }}</span></li>
            <li><span class="col">{{ lang.jdbc_url }}</span> <span class="col1">{{ superDataBaseConfig.connection.jdbcUrl }}</span><span class="col2">{{ lang.must_be_without_database_name }}</span></li>
            <li><span class="col">{{ lang.user_name }}</span> <span class="col1">{{ superDataBaseConfig.connection.userName }}</span></li>
        </ul>
    </Card>

    <Card class="Card" style="margin-top: 10px;" :title="lang.step_prepare_database_configuration">
        <ul>
            <li><span class="col">{{ lang.jdbc_url }}</span> <span class="col1">{{ databaseConfig.jdbcUrl }}</span><span class="col2">{{ lang.must_be_contain_database_name }}</span></li>
            <li><span class="col">{{ lang.user_name }}</span> <span class="col1">{{ databaseConfig.userName }}</span></li>
            <li><span class="col">{{ lang.initial_pool_size }}</span> <span class="col1">{{ databaseConfig.initialPoolSize }}</span></li>
            <li><span class="col">{{ lang.max_pool_size }}</span> <span class="col1">{{ databaseConfig.maxPoolSize }}</span></li>
            <li><span class="col">{{ lang.min_pool_size }}</span> <span class="col1">{{ databaseConfig.minPoolSize }}</span></li>
        </ul>
    </Card>
    <div style="text-align:center;" class="row">
        <Card :style="{textAlign: lang.rtl ? 'right' : 'left'}" :bordered="false" class="Card">
        <ul>
            <li v-for="item in messions" :key="item.id">
                <span class="col">{{ item.text() }}</span>
                <span v-if="item.state == 1" class="col1"><Progress size="18" /></span>
                <span v-if="item.state == 2" class="col1 color-success">{{ lang.successed }}</span>
                <span v-if="item.state == 3" class="color-error" style="width: 80px;">{{ lang.failed }}</span>
                <span v-if="item.state == 3" class="color-error" style="direction: ltr;">{{ item.message }}</span>
                <span v-if="item.state == 3" class="col2 go-link" @click="goToPage(item.pageIndex)">{{ lang.go_to_settings_page }}</span>
            </li>
        </ul>
    </Card>
        <Button type="primary" @click="start" :loading=startButtonLoading>{{ lang.click_here_to_start }}</Button>
        
    </div>
</div>
</template>
<script>
import { Api, MyHttpClient } from "../../../api";
import { resolve } from 'upath';
import { Methods } from "../../../Store/WebServer"
import { DataBaseConfig } from '../../../Entities/DataBaseConfig';
import { DataBaseCreationConfig } from '../../../Entities/DataBaseCreationConfig';
import { Application } from '../../../Entities/Application';

function newHttpClient() {
  return new MyHttpClient();
}

const GO_TO_PAGE = "onGoPage";
const MESSION_STATE = {
    NOT_STARTED: 0,
    RUNNING: 1,
    SUCCESS: 2,
    FAILD: 3
}

export default {
  props: {
    superDataBaseConfig: {
      required: true,
      type: Object,
      validator: DataBaseCreationConfig.isValid
    },
    databaseConfig: {
      retuired: true,
      type: Object,
      validator: DataBaseConfig.isValid,
    },
    applicationInstance: {
      required: true,
      type: Object,
      validator: Application.isValid
    }
  },
  data() {
    return {
      messions: [
        {
          id: 0,
          text: () => this.lang.create_database,
          state: MESSION_STATE.NOT_STARTED, //0 -> not started, 1 -> running, 2 -> success, 3 -> fail
          message: "",
          pageIndex: 0,
          action: async function(self) {
              return newHttpClient().put(Api.webServer.createDataBase(), self.superDataBaseConfig)
          }
        },
        {
          id: 1,
          text: () => this.lang.connect_to_database,
          state: MESSION_STATE.NOT_STARTED,
          message: "",
          pageIndex: 1,
          action: async function(self) {
              return newHttpClient().put(Api.webServer.setDataBaseConfig(), self.databaseConfig)
          }
        },
        {
          id: 2,
          text: () => this.lang.create_table,
          state: MESSION_STATE.NOT_STARTED,
          message: "",
          pageIndex: 1,
          action: async function(self) {
              return newHttpClient().put(Api.webServer.createTables())
          }
        },
        {
          id: 3,
          text: () => this.lang.import_area_data_from_local,
          state: MESSION_STATE.NOT_STARTED,
          message: "",
          pageIndex: 4,
          action: async function(self) {
              return newHttpClient().put(Api.area.importAreaDataFromLocal())
          }
        },
        {
          id: 4,
          text: () => this.lang.create_an_application,
          state: MESSION_STATE.NOT_STARTED,
          message: "",
          pageIndex: 2,
          action: async function(self) {
              return newHttpClient().put(Api.application.initialize(), self.applicationInstance)
          }
        },
      ],
      startButtonLoading: false
    };
  },
  computed: {
    lang() {
      return this.$store.state.lang;
    },
    json(){
      return JSON.stringify(this.applicationInstance, true, 3)
    }
  },
  methods: {
    goToPage(pageIndex) {
      this.$emit(GO_TO_PAGE, pageIndex);
    },
    async start(){
        this.startButtonLoading = true
        const ms = this.messions.filter(item => item.state == MESSION_STATE.NOT_STARTED || MESSION_STATE.FAILD)
        
        for (let index = 0; index < ms.length; index++) {
            const item = this.messions[index]
            try{
                item.state = MESSION_STATE.RUNNING
                await item.action(this)
                item.state = MESSION_STATE.SUCCESS
            }
            catch (exception){
                this.startButtonLoading = false
                item.state = MESSION_STATE.FAILD
                item.message = exception.response.data.message
                console.log(item.message)
                break
            }
        }
        await Methods.getStatus(this.$store)
        this.startButtonLoading = false
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../assets/colors";
$col: 280px;
$col1: 270px;
$col2: auto;

span {
  display: inline-block;
}

.col {
  width: $col;
}
.col1 {
  width: $col1;
  //   text-align: left;
}
.col2 {
  color: rgb(255, 92, 92);

  margin: {
    right: 10px;
    left: 10px;
  }
}
.row {
  // border: {
  //     color: red;
  //     width: 1px;
  //     style: solid;
  // }
  margin: {
    top: 10px;
  }
}

.Card {
  margin: 10px;
}

li {
  list-style-type: none;
}

.go-link {
  color: $color-primary;
  text-decoration: underline;
  cursor: pointer;
}
.color-error {
    color: $color-error;
}
.color-success {
    color: $color-primary
}
</style>
